<template>
  <div class="main">
    <!-- 标题 -->
    <Title :title="title" />
    <Card
      title="工单基本信息"
      :icon-src="userInfoForm.image"
      :custom-style="{ width: '23px', height: '24px' }"
    >
      <div slot="content" style="position: relative; padding-bottom: 50px">
        <my-form
          :ref-obj.sync="userInfoForm.ref"
          :form-opts="userInfoForm"
          :width-size="2"
          @handleEvent="handleUserInfoEvent"
        />
        <el-button
          style="position: absolute; right: 50px"
          type="primary"
          @click="submit"
        >保存</el-button>
      </div>
    </Card>
  </div>
</template>

<script>
import config from './config.js'
import { editUserInfo, getUserInfo } from '@/api/user'

export default {
  data () {
    return {
      userInfoForm: config.userInfoForm
    }
  },
  created () {
    // 设置标题
    this.title = this.$route.meta.title
    this.getUserInfo()
  },
  methods: {
    handleUserInfoEvent (type, val) {
      console.log(val, type)
    },
    submit () {
      this.userInfoForm.ref.validate((valid) => {
        if (!valid) return
        this.editUserInfo(this.userInfoForm.formData)
      })
    },
    // 修改用户信息
    async editUserInfo (data) {
      await editUserInfo(data)
      this.$message.success('保存成功')
    },
    // 获取用户个人信息
    async getUserInfo () {
      const res = await getUserInfo()
      if (res.data) {
        this.userInfoForm.formData = res.data
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
